<template>
  <div class="app-container home">
        <el-row :gutter="20">
            <el-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="">
                <infor-card :color="infor.color" :icon="infor.icon" :icon-size="36">
                    <count-to :end="infor.count" count-class="count-style" :simplify="infor.simplify"
                              :unit="infor.units"/>
                    <span style="font-weight: 600;">{{ infor.title }}</span>
                </infor-card>
            </el-col>
        </el-row>
<!--        <el-row :gutter="20" style="margin-top: 10px;">-->
<!--            <el-col :md="24" :lg="12" style="margin-bottom: 20px;">-->
<!--                <el-card shadow>-->
<!--                <div slot="header" >-->
<!--                    <span style="font-weight: 600;">已签署合同数量企业Top10</span>-->
<!--                </div>-->
<!--                <ve-pie style="height: 400px;" :data="pieData" :legend="chartLegend" :settings="chartSettings" v-bind="pubSetting" ></ve-pie>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :md="24" :lg="12" style="margin-bottom: 20px;">-->
<!--                <contract-statistics-of-date-range  />-->
<!--            </el-col>-->
<!--        </el-row>-->
        <el-row>
            <el-col :md="24" :lg="24" style="margin-top: 10px;">
                <el-card shadow>
                    <div slot="header" >
                        <span style="font-weight: 600;">未完成合同列表</span>
                    </div>
                    <el-row :gutter="20" style="margin-top: 10px;">
                        <el-col :md="24" :lg="24">
                <el-table
                        size="mini"
                        v-loading="contractDataListLoading"
                        :data="contractDataList"
                        border
                        stripe
                        style="width: 100%;">
                    <el-table-column prop="contractNo" :label="$t('contract.contractNo')" header-align="center" align="center" >
<!--                        <template slot-scope="scope">-->
<!--                            <el-button type="text" @click="contractDetailList(scope.row)">{{ scope.row.contractNo }}</el-button>-->
<!--                        </template>-->
                    </el-table-column>
                    <el-table-column prop="contractName" :label="$t('contract.contractName')" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="clientName" :label="$t('contract.clientName')" header-align="center" align="center" />
                    <el-table-column prop="customerName" :label="$t('contract.customerName')" header-align="center" align="center" width="100"/>
                    <el-table-column prop="amount" :label="$t('contract.amount')" header-align="center" align="center" width="110"/>
                    <el-table-column prop="contractAmount" :label="$t('contract.contractAmount')" header-align="center" align="center" width="110"/>

                    <el-table-column prop="status" :label="$t('contract.status')"  header-align="center" align="center"  width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status === '0'" size="mini" type="info">{{ $t('contract.status0') }}</el-tag>
                            <el-tag v-else-if="scope.row.status === '1'" size="mini" type="warning">{{ $t('contract.status1') }}
                            </el-tag>
                            <el-tag v-else-if="scope.row.status === '2'" size="mini">{{ $t('contract.status2') }}</el-tag>
                            <el-tag v-else-if="scope.row.status === '3'" size="mini" type="warning">{{ $t('contract.status3') }}
                            </el-tag>
                            <el-tag v-else-if="scope.row.status === '4'" size="mini" type="success">{{ $t('contract.status4') }}
                            </el-tag>
                            <el-tag v-else-if="scope.row.status === '5'" size="mini" type="danger">{{ $t('contract.status5') }}
                            </el-tag>
                            <el-tag v-else-if="scope.row.status === '6'" size="mini" type="danger">{{ $t('contract.status6') }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="datumStatus" :label="$t('contract.datumStatus')"  header-align="center" align="center" width="120">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.datumStatus === 0" size="mini" type="danger">{{ $t('contract.datumStatus0') }}</el-tag>
                            <el-tag v-else-if="scope.row.datumStatus === 1" size="mini" type="success">{{ $t('contract.datumStatus1') }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="creator" :label="$t('createBy')"  header-align="center"  align="center" width="80"/>
                    <el-table-column prop="createTime" :label="$t('createTime')" header-align="center"  align="center" width="90"/>
                    <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="100">
                        <template slot-scope="scope">
                            <el-button v-hasPermi="['sys:contract:look']" type="text" size="mini" @click="contractDetailList(scope.row)">{{ $t('look') }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                        </el-col>
                        <el-col :md="24" :lg="24" style="margin-top: 10px;">
                            <el-pagination
                                    :current-page="contractPage"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="contractLimit"
                                    :total="contractTotal"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    @size-change="pageSizeContracChangeHandle"
                                    @current-change="pageCurrentContracChangeHandle">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

        </el-row>

        <el-row>
            <el-col :md="24" :lg="24" style="margin-bottom: 20px; margin-top: 10px;">
                <el-card shadow>
                    <div slot="header" >
                        <span style="font-weight: 600;">近3天到期诉讼列表</span>
                    </div>
                    <el-row :gutter="20" style="margin-top: 10px;">
                        <el-col :md="24" :lg="24">
                            <el-table
                                size="mini"
                                v-loading="dataListLoading"
                                :data="dataList"
                                border
                                stripe
                                style="width: 100%;">
                            <el-table-column prop="name" :label="$t('lawsuit.name')" header-align="center" align="center"/>
                            <el-table-column prop="lawsuitFlowName" :label="$t('lawsuit.lawsuitFlowName')" header-align="center" align="center"/>
                            <el-table-column prop="applyPersonName" :label="$t('lawsuit.applyPersonName')" header-align="center" align="center"/>
                            <el-table-column prop="idNumber" :label="$t('lawsuit.idNumber')" header-align="center" align="center"  />
                            <el-table-column prop="disputeMoney" :label="$t('lawsuit.disputeMoney')" header-align="center" align="center"/>
                            <el-table-column prop="lawsuitFlowTypeName" :label="$t('lawsuit.lawsuitFlowTypeName')" header-align="center" align="center"/>
                            <el-table-column prop="flowDeadline" :label="$t('lawsuit.flowDeadline')" header-align="center" align="center" :formatter="dateFormat" />
                            <el-table-column prop="createTime" :label="$t('createTime')" header-align="center" align="center" width="180" :formatter="dateFormat"/>
                            </el-table>
                        </el-col>
                        <el-col :md="24" :lg="24" style="margin-top: 10px;">
                            <el-pagination
                                    :current-page="page"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="limit"
                                    :total="total"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    @size-change="pageSizeChangeHandle"
                                    @current-change="pageCurrentChangeHandle">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <contract-flow-list  ref="detailOrUpdate" v-if="detailDialogVisible" :parent-id="parentId" :status="statusCode"/>

  </div>
</template>

<script>
    import list from '@/components/charts/_mixin/list.js'
    import InforCard from "@/components/info-card";
    import CountTo from "@/components/CountTo";
    import { moduleRoutes } from '@/router'
    import { mapMutations } from 'vuex'

    import ContractFlowList from '@/views/zfw/contract/contract-flow-list'

    // import ContractStatisticsOfDateRange from "@/views/modules/statistics/ContractStatisticsOfDateRange.vue";


    export default {
        mixins: [
            list
        ],
        name: 'home',
        components: {
            // ContractStatisticsOfDateRange,
            CountTo,
            InforCard,
            ContractFlowList
        },
        data() {
            this.chartSettings = {
                radius: 140,
                offsetY: 210,
                labelMap: {
                    'companyName': '企业名称',
                    'totalCount': '已完成合同(份)'
                }
            };
            this.chartLegend = {
                show: true
            };
            return {
                inforCardData: [
                    {title: '合同总数量', icon: 'el-icon-document-copy', count: 0, color: '#2d8cf0', simplify: true},
                    {title: '完成合同数量', icon: 'el-icon-document-checked', count: 0, color: '#19be6b', simplify: true},
                    {title: '诉讼数量', icon: 'el-icon-trophy', count: 0, color: '#ff9900', simplify: true},
                    {title: '待定', icon: 'el-icon-office-building', count: 0, color: '#ed3f14', simplify: true},
                    {title: '待定', icon: 'iconfont icon-md-cash', count: 0, color: '#E46CBB', simplify: true},
                    {title: '待定', icon: 'iconfont icon-md-people', count: 0, color: '#9A66E4', simplify: true}
                ],
                pieData: {
                    columns: ['companyName', 'totalCount'],
                    rows: []
                },
                barData: {
                    Mon: 13253,
                    Tue: 34235,
                    Wed: 26321,
                    Thu: 12340,
                    Fri: 24643,
                    Sat: 1322,
                    Sun: 1324
                },
                dataEmpty: true,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dataList:[],
                contractDataList:[],
                page: 1, // 当前页码
                limit: 10, // 每页数
                total: 0,
                dataListLoading:false,
                contractDataListLoading:false,
                contractPage: 1,                    // 当前页码
                contractLimit: 10,                  // 每页数
                contractTotal: 0,
                detailDialogVisible: false,
                parentId: 0,
                statusCode: 0,
            }
        },
        methods: {
            ...mapMutations('d2admin/page', {
                d2adminPagePoolPush: 'push'
            }),
            init: function () {

                //近7天贷款统计
                //活跃用户今日统计
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                this.dateRange = [start, end];

                this.getContractStatistics();

                this.getLawsuitTotal();

                this.getCompanyTotal();

                // this.getContractCompleteTopNum();

                this. getUnCompleteContractList();

                this.getLawsuitDueByDays();
            },

            // 获取合同数量统计
            getContractStatistics: function () {
                this.$http.get('/manager/statistics/getContractStatistics', {}).then(res => {
                    this.inforCardData[0].count = res.data.totalCount;
                    this.inforCardData[1].count = res.data.completedCount;
                }).catch(() => {
                })
            },

            getLawsuitTotal: function () {
                this.$http.get('/manager/statistics/getLawsuitTotal', {}).then(res => {
                    this.inforCardData[2].count = res.data;
                }).catch(() => {
                })
            },

            getCompanyTotal: function () {
                this.$http.get('/manager/statistics/getCompanyTotal', {}).then(res => {
                    this.inforCardData[3].count = res.data;
                }).catch(() => {
                })
            },

            // 合同完成量top10企业统计
            // getContractCompleteTopNum: function () {
            //     this.$http.get('/statistics/getContractCompleteTopNum', {num: 10}).then(res => {
            //         this.pieData.rows = res;
            //     }).catch(() => {
            //     })
            // },

            contractDetailList: function (row) { // 查看合同流程里的合同信息列表
                // 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
                // var routeName = `contract-flow-list`
                // var route = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0]
                // if (route) {
                //     route.meta.title = `合同详情 - ${row.contractNo}`
                //     return this.$router.push({ name: route.name, params: { 'parentId': row.id, 'status': row.status } })
                // }
                // // 否则: 添加并全局变量保存, 再跳转
                // route = {
                //     path: routeName,
                //     component: () => import('@/views/modules/contract/contract-flow-list'),
                //     name: routeName,
                //     meta: {
                //         ...window.SITE_CONFIG['contentTabDefault'],
                //         menuId: this.$route.meta.menuId,
                //         title: `合同详情 - ${row.contractNo}`
                //     }
                // }
                // this.$router.addRoutes([
                //     {
                //         ...moduleRoutes,
                //         name: `main-dynamic__${route.name}`,
                //         children: [route]
                //     }
                // ])
                // window.SITE_CONFIG['dynamicRoutes'].push(route)
                // this.d2adminPagePoolPush(route)
                // this.$router.push({ name: route.name, params: { 'parentId': row.id, 'status': row.status } })

                this.parentId = row.id;
                this.statusCode = row.status;
                this.detailDialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.detailOrUpdate.init()
                })

            },

            //获取未完成合同列表数据
            getUnCompleteContractList(){
                let params = {
                    order: 'DESC',
                    orderField: 'createTime',
                    current: this.contractPage,
                    size: this.contractLimit,
                    datumStatus: 0,
                    status:0,
                };
                this.contractDataListLoading = true,
                this.$http.get('/manager/contract/unCompleteContractPage', params).then(res => {
                    this.contractDataListLoading = false;
                    this.contractDataList = res.data.records;
                    this.contractTotal = res.data.total;
                }).catch(() => {
                    this.contractDataListLoading = false;
                })
            },

            //获取即将到期诉讼数据
            getLawsuitDueByDays: function () {
                let params = {
                    current: this.page,
                    size: this.limit ,
                    days: 3
                };
                this.$http.get('/manager/statistics/getLawsuitDueByDays', params).then(res => {
                    this.dataList = res.data.records;
                    this.total = res.data.total;
                }).catch(() => {
                })
            },

            // 分页, 每页条数
            pageSizeContracChangeHandle (val) {
                this.contractPage = 1;
                this.contractLimit = val;
                this.getUnCompleteContractList();
            },
            // 分页, 当前页
            pageCurrentContracChangeHandle (val) {
                this.contractPage = val;
                this.getUnCompleteContractList();
            },

            // 分页, 每页条数
            pageSizeChangeHandle (val) {
                this.page = 1;
                this.limit = val;
                this.getLawsuitDueByDays();
            },
            // 分页, 当前页
            pageCurrentChangeHandle (val) {
                this.page = val;
                this.getLawsuitDueByDays();
            },

            dateFormat:function(row,column) {
                const dateStr = row[column.property]
                if (dateStr != null) {
                    const dateMat = new Date(dateStr);
                    const year = dateMat.getFullYear();
                    const month = dateMat.getMonth() + 1;
                    const day = dateMat.getDate();
                    const hh = dateMat.getHours();
                    const mm = dateMat.getMinutes();
                    const ss = dateMat.getSeconds();
                    // const timeFormat = year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                    // const timeFormat = year + "-" + month + "-" + day;
                    let timeFormat = year+'-'+ (month<10?'0'+month:month)+'-'+ (day<10?'0'+day:day);
                    return timeFormat;
                }
            },
        },
        mounted: function () {
            this.init();
        }
    }
</script>

<style>
    .count-style {
        font-size: 42px;
    }


</style>
